<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FileReader接口</title>
</head>
<body>
    <!-- 需求：及时预览 
        分析
        1、及时：当用户选择完图片之后就立刻进行预览的处理
        2、预览：通过文件读取对象的 readAsDataURL()完成
    -->
    <form action="">
        文件：<input type="file" name="file" id="file" onchange="getFileContent()"> <br>
        <input type="submit" value="提交">
    </form>
    <img src="" alt="">
    <script>
        /*
            FileReader 读取文件内容
                1、 readAsText() 读取文本文件（可以使用txt打开的文件），返回文本字符串，默认编码是 UTF-8
                2、 readAsBinaryString() 读取任意类型的文件，返回二进制字符串，这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储
                3、 readAsDataURL() 读取文件，获取一段以data开头的字符串，这段字符串的本质就是 DataURL，DataURL 是一种将文件（这种文件一般是指图像或者是能够嵌入到文档中的文件格式）嵌入到文档的方案。DataURL 是将资源转换为 base64 编码的字符串形式，并且将这些内容直接存储在 url 中。主要用于优化网站的加载速度和执行的效率
                4、 abort() 中断读取
        */
       function getFileContent() {
           // 1 创建文件对象
           var reader = new FileReader()

           // 2 读取文件，获取 DataURL
           // 2.1 该方法没有返回值，读取完文件之后，会它将结果存储在文件读取对象的 result 中
           // 2.2 需要传递一个参数，binary large object 文件（图片或其他可以嵌入文档的类型）
           // 2.3 文件存储在 file 表单的 files 属性中，它是一个数组
           // 2.4 readAsDataURL 方法是异步的
           var file = document.querySelector("#file").files[0]
           console.log(file)
           reader.readAsDataURL(file)
           // 获取数据
           /*
            FileReader 提供了一个完整的事件模型，用来捕获文件读取时的状态
                onabort 读取文件中断时触发
                onerror 读取错误时触发
                onload 文件读取成功时触发
                onloadend 文件读取完成时触发，无论成功还是失败
                onloadstart 开始读取时触发
                onprogress 读取文件过程中持续触发 
           */
          reader.onload = function() {
              console.log(reader.result)
              // 展示
              document.querySelector("img").src = reader.result
          }
       }
    </script>
</body>
</html>